<template>
  <div>
    <van-nav-bar title="选择抄送人" left-arrow @click-left="onClickLeft" />
    <div class="box">
      <div class="chaosongren">
        <div class="public_between public_9_color onSubmit">
          <div bindtap="onBack">取消</div>
          <div :class="ccUsers.length ? 'public_color' : ''" @click="onSubmit">确定({{ ccUsers.length }})</div>
        </div>
        <div style="margin-left: -24px; margin-right: -24px">
          <van-search custom-class="inputcustom" v-model="keyword" @search="onSearch" @update:model-value="onSearch" placeholder="请输入搜索关键词" />
        </div>
        <div class="public_ellipsis public_clear_both" style="display: flex">
          <!-- <div class=""> -->
          <div v-for="item in ccUsers" :key="item" class="topImgli public_float_left">
            <div class="headImg" v-if="item.headImg" style="background-color: transparent">
              <van-image round class="vanimg" :src="item.headImg" />
            </div>
            <van-image @click="delList" class="shanchu" src="https://new-kaka.oss-cn-beijing.aliyuncs.com/WeChat/icon/shanchu.png"></van-image>
          </div>
          <!-- </div> -->
        </div>
        <div class="projectName public_color public_fs_24" v-if="projectName">
          {{ projectName }}
        </div>
      </div>
      <div style="padding-left: 32px; padding-bottom: 32px">
        <div v-if="!pageLoading" v-for="(item, index) in list" :key="index">
          <van-checkbox @change="onClickItem(index)" v-model="item.checked" checked-color="#745ee9">
            <div class="list" data-index="{{index}}">
              <div class="headImg" v-if="item.headImg" style="background-color: transparent">
                <van-image round class="vanimg" :src="item.headImg" />
              </div>
              <div class="headImg" v-else>{{ item.nickName[0] }}</div>
              <div class="cstext">
                <div class="public_fs_32 public_3_color">{{ item.nickName }}</div>
                <div class="public_fs_24 public_3_color">{{ item.position }}</div>
              </div>
            </div>
          </van-checkbox>
        </div>
      </div>
    </div>
    <van-skeleton title avatar row="10" :loading="pageLoading" />
    <van-toast id="van-toast" />
  </div>
</template>

<script setup>
import { getProjectUsersApi } from '@/request/wodeApi.js'
import { useCsrStore } from '@/stores/chaosongren.js'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

const store = useCsrStore()
const router = useRouter()
const list = ref([])
const keyword = ref('')
const projectName = ref('')
const ccUsers = ref([])
const pageLoading = ref(true)
// 点击选中取消
const onClickItem = (index) => {
  let i = index
  let list1 = list.value
  //   list.value[i].checked = !list.value[i].checked || false
  let newList = []
  list1.forEach((item) => {
    if (item.checked) {
      newList.push(item)
    }
  })
  console.log(list.value)
  list.value = list1
  ccUsers.value = newList
}
// 删除选中
const delList = () => {
  let xunhuanList = []
  list.value.forEach((item) => {
    if (ccUsers.value[0].id == item.id) {
      item.checked = false
    }
    xunhuanList.push(item)
  })

  ccUsers.value = []
  list.value = xunhuanList
}
// 搜索
const onSearch = () => {
  getData()
}
import { showToast } from 'vant'
const onSubmit = () => {
  let checkoutP = ccUsers.value
  if (checkoutP.length < 1) {
    showToast('请选择申请人')
    return
  }

  console.log(ccUsers.value)
  store.ccUsers = ccUsers.value
  router.back()
}

// 获取列表
const getData = () => {
  getProjectUsersApi({ keyword: keyword.value }).then((res) => {
    if (res.code == '200') {
      let list1 = res.data || []
      let ccUsers1 = store.ccUsers
      console.log(store)
      let ids = ccUsers1.map((item) => item.userCode)
      list1.forEach((item) => {
        if (ids.indexOf(item.userCode) > -1) {
          item.checked = true
        }
      })

      list.value = list1
      ccUsers.value = ccUsers1

      //   list.value = res.data
      //   if (res.data.length > 0) {
      //     projectName.value = res.data[0].deptNames
      //   }

      pageLoading.value = false
    }
  })
}
onMounted(() => {
  getData()
})
const onClickLeft = () => {
  router.back()
}
</script>
<style scoped>
.chaosongren {
  padding: 16px 32px 0;
  background-color: #ffffff;
}
.projectName {
  border-top: 10px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  padding: 20px 32px;
  margin-left: -32px;
  margin-right: -32px;
}
.topImgli {
  margin-right: 10px;
  margin-bottom: 10px;
  margin-top: 10px;
}
.list {
  position: relative;
  display: flex;
  align-items: center;
  padding: 20px 0;

  width: 500px;
}
.van-checkbox {
  border-bottom: 1px solid #f0f0f0 !important;
  margin-right: 24px;
}
.list::before {
  content: '';
  display: block;
  height: 3px;
  width: 200px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #ffffff;
}
.cstext {
  padding-left: 20px;
}
.headImg {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #745ee9;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
  overflow: hidden;
}
.vanimg {
  height: 100px;
  width: 100px;
}
.shanchu {
  height: 28px;
  width: 28px;
  position: relative;
  top: -105px;
  left: 75px;
}
.onSubmit {
  font-size: 24px;
}
/*@import url(); 引入公共css类*/
</style>
